<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>jdMenu 1.3.beta2</title>
		<script src="/menu/beta2/jquery-1.1.2.js" type="text/javascript"></script>
		<script src="/menu/beta2/jquery.bgiframe.js" type="text/javascript"></script>
		<script src="/menu/beta2/jquery.dimensions.js" type="text/javascript"></script>
		<script src="/menu/beta2/jquery.jdMenu.js" type="text/javascript"></script>
		<script type="text/javascript">
			// Initialization, you can leave this here or move this somewhere else
			$(function(){
/*				$('ul.jd_menu_vertical').jdMenu(
					{
						onShow: loadMenu, 
						onHide: unloadMenu, 
						offset: 2, 
					}
				);*/
				
				$('div.jd_menu_vertical').jdMenu(
					{
						onShow: loadMenuNew, 
//						onHide: unloadMenu, 
						offset: 2, 
					}
				);
			});

			function loadMenuNew() {
				var data = <?php echo file_get_contents('test.js'); ?>
				
				//$('li',this).append('<a href="#">link</a>');
				
				writeLevelNew(this,data.items);
			}

			function writeLevelNew( object, items ) {
alert(items);		
//				$('ul#menu', object).append('<a herf="#">link</a>');
//				$('> ul', object).append();
			}
			
			function loadMenu() {

				if (this.id == 'dynamicMenu') {

					var data = <?php echo file_get_contents('test.js'); ?>

					$('> ul > li', this).remove();
			
					writeLevel(this,data.items);

				}
			}

			function writeLevel(object,d) {
				var ul = $('<ul></ul>');

				for (i=0;  i < d.length; i++) {
					id 	 = d[i].id;
					name = d[i].info[0];

					if(d[i].children) {
						var  subUl = '<ul id="subUl'+ id +'"></ul>';
						name = name + ' > ';
					} else {
						var  subUl = '';
					}

					$('> ul', object).append('<li id="subLi'+ id +'"><a href="#' + id + '">Item # ' + name + '</a>' + subUl  + '</li>');

					if(d[i].children) {
						
						var subObject = document.getElementById("subLi" + id);

						writeLevel(subObject,d[i].children);
					}
				}
			}
/*
			function unloadMenu() {
				if (MENU_COUNTER >= 30) {
					MENU_COUNTER = 1;
				}
			}
*/
			// We're passed a UL
			function onHideCheckMenu() {
				return !$(this).parent().is('.LOCKED');
			}

			// We're passed a LI
			function onClickMenu() {
				$(this).toggleClass('LOCKED');
				return true;
			}
		</script>
		<link rel="stylesheet" href="/menu/beta2/jdMenu.css" type="text/css" />
		<link rel="stylesheet" href="/menu/beta2/jdMenu.slate.css" type="text/css" />
		<style type="text/css">
			body {
				margin: 0px;
				padding: 25px;
				font-family: sans-serif;
				font-size: small;
			}
			h1 {
				font-family: sans-serif;
				color: #0068B8;
			}
			
			li.LOCKED {
				font-weight: bold;
			}
			body {
				margin: 0px;
				margin-left: 15px;
			}
		</style>
	</head>
<body>

	<h1>jdMenu 1.3.beta2</h1>
	<a href="/sort/test/widget/test.html">manipulate</a>

		<!-- ul class="jd_menu_vertical jd_menu_slate">
			<li id="dynamicMenu">Dynamic Menu >
			<ul></ul>
			</li>
		</ul-->

		<!-- ul id="menu_vertical">
			<li></li>
		</ul-->
		
		<div class="jd_menu_vertical">
			<ul id="menu"></ul>
		</div>

<!--		<div class="jd_menu_vertical jd_menu_slate">
		</div>
		<ul class="jd_menu_vertical jd_menu_slate">
		  <li id="dynamicMenu">Dynamic Menu >
		    <ul></ul>
		  </li>
		</ul>
-->
		
<!--		<ul class="jd_menu_vertical jd_menu_slate">
			<li id="dynamicMenu">Dynamic Menu >
		<ul>
				</ul>
-			</li>
		</ul>-->
			<!-- li>jQuery >
				<ul>
					<li><a href="http://jquery.com" target="_blank">jQuery.com</a></li>
					<li><a href="http://docs.jquery.com">jQuery Docs</a></li>
					<li><a href="http://jquery.com/plugins/">jQuery Plugins</a></li>
					<li><a href="http://www.visualjquery.com">Visual Jquery</a></li>
				</ul>
			</li>
			<li>jd Sharp >
				<ul style="width: 400px;">
					<li>AutoScroll Plugin for jQuery</li>
					<li>jdMenu Plugin for jQuery</li>
					<li>Sub sub
						<ul>
							<li>Item 1</li>
							<li>Item 2</li>
							<li>Item 3</li>
							<li>Item 4</li>
							<li>Item 5</li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
	</div-->
</body>
</html>
